<template>
	<cl-dialog
		title="退款详情"
		width="600px"
		:props="{ top: '5vh' }"
		:visible.sync="visible"
		@close="close"
	>
		<el-form label-width="120px">
			<el-form-item label="退回状态：">
				<span class="color-primary">
					<template v-if="detail.state == 2 && detail.submit_num > 1">
						待审核（重新退回）
					</template>
					<template v-else>
						{{ detail.state | filterYn }}
					</template>
				</span>
			</el-form-item>
			<el-form-item label="审核记录：">
				<template v-if="detail.operate_recode && detail.operate_recode.length">
					<el-timeline>
						<el-timeline-item
							v-for="(item, idx) in detail.operate_recode"
							:key="idx"
							:type="!idx ? 'primary' : ''"
						>
							<div class="msg">{{ item.operate_mes }}</div>
							<template v-if="item.images.length">
								<div>
									<el-image
										v-for="(img, i) in isArr(item.images)"
										:key="i"
										:src="`${img}?x-oss-process=image/resize,limit_0,m_fill,w_50,h_50`"
										:preview-src-list="isArr(item.images)"
										class="refimage"
										:z-index="3000"
										fit="cover"
									/>
								</div>
							</template>
							<div class="time">{{ item.add_user_name }}：{{ item.create_time }}</div>
						</el-timeline-item>
					</el-timeline>
				</template>
				<span v-else>-</span>
			</el-form-item>
			<el-form-item label="退款时间：">{{ detail.create_time }}</el-form-item>
			<el-form-item label="订单总额：">{{ detail.real_amount }}</el-form-item>
			<el-form-item label="申请退款金额：">{{ detail.refund_money || "-" }}</el-form-item>
			<el-form-item label="实际退款金额：">{{ detail.actual_money || "-" }}</el-form-item>
			<el-form-item label="截留金额：">{{ detail.interception || "-" }}</el-form-item>
			<el-form-item label="申请退款客户：">{{ detail.refund_user_name || "-" }}</el-form-item>
			<el-form-item label="退款类型：">{{ detail.refund_name }}</el-form-item>
			<el-form-item label="收款人：">{{ detail.bank_name }}</el-form-item>
			<el-form-item label="收款账号：">{{ detail.back_account }}</el-form-item>
			<el-form-item label="退款凭证：">
				<template v-if="detail.images.length">
					<el-image
						class="img-item"
						v-for="(item, index) in detail.images"
						:key="index"
						:src="`${item}?x-oss-process=image/resize,limit_0,m_fill,w_100,h_100`"
						:preview-src-list="detail.images"
						:z-index="3000"
						fit="cover"
					/>
				</template>
				<span v-else>-</span>
			</el-form-item>
			<el-form-item label="退款原因：">{{ detail.remark }}</el-form-item>
			<el-form-item label="提交人：">{{ detail.add_user_name }}</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
const statusType = {
	0: { text: "已驳回" },
	2: { text: "待审核" },
	4: { text: "未打款" },
	5: { text: "已打款" }
};
const filterYn = (val, key = "text") => {
	return statusType[val] ? statusType[val][key] : "";
};
export default {
	data() {
		return {
			visible: false,
			detail: {
				images: []
			}
		};
	},
	methods: {
		open(data = {}) {
			this.visible = true;
			this.getDetail(data);
		},
		close() {
			this.visible = false;
		},
		async getDetail(info) {
			const data = await this.$service.orderrefund.refunddetail({ refund_id: info.id });
			this.detail = { ...data };
		},
		isArr(val) {
			if (!Array.isArray(val)) {
				return val.split(",");
			}
			return val;
		}
	},
	filters: {
		filterBackType(val) {
			switch (val) {
				case 1:
					val = "微信";
					break;
				case 2:
					val = "支付宝";
					break;
				case 3:
					val = "银行卡";
					break;
				default:
					val = "-";
					break;
			}
			return val;
		},
		filterYn
	}
};
</script>
<style lang="scss" scoped>
.refimage {
	width: 50px;
	height: 50px;
	margin-right: 10px;
}
::v-deep {
	.el-form-item {
		margin-bottom: 10px !important;
	}
	.el-timeline {
		padding-top: 10px;
		.el-timeline-item {
			&:last-child {
				padding-bottom: 10px;
			}
		}
	}
	.el-timeline-item__tail {
		top: 8px;
		border-left: 1px dashed #e6e6e6;
	}
	.el-timeline-item__node--normal {
		left: 1px;
		top: 8px;
		width: 8px;
		height: 8px;
	}
}
.msg {
	font-size: 14px;
	color: #606060;
}
.time {
	font-size: 12px;
	color: #999999;
}
.img-item {
	width: 100px;
	height: 100px;
	+ .img-item {
		margin-left: 10px;
	}
}
</style>
